
<template>
  <div>
    <el-table
        border
        :data="variableConfigs"
        tooltip-effect="dark"
        height="290px"
        size="small"
        ref="singleTable"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%">

      <el-table-column
          prop="key"
          label="变量名"
          width="250">
        <template slot-scope="scope">{{ scope.row.key }}</template>
      </el-table-column>
      <el-table-column
          prop="value"
          label="变量名值"
          width="250">
        <template slot-scope="scope">{{ scope.row.value }}</template>
      </el-table-column>
      <el-table-column
          prop="desc"
          label="变量描述"
          width="250">
        <template slot-scope="scope">{{ scope.row.desc }}</template>
      </el-table-column>

    </el-table>
    <div style="margin-top:10px;">
      <el-button type="primary"  size="small" @click="add">添加</el-button>
      <el-button type="primary"  size="small" @click="update">修改</el-button>
      <el-button type="primary"  size="small" @click="remove">删除</el-button>
    </div>
    <AddVariable ref="addVariable"  @success="addVariableRecord"></AddVariable>
    <UpdateVariable ref="updateVariable"  @success="updateVariableRecord"></UpdateVariable>
  </div>

</template>
<script>
import AddVariable from '../variable/AddVariable.vue';
import UpdateVariable from '../variable/UpdateVariable.vue';
import { utils } from '../../utils/common.js'
export default {
  props:[
      "parentNode",
      "process"
  ],
  components:{
    AddVariable,
    UpdateVariable
  },
  data(){
    return {
      node:{},
      labelPosition:'right',
      variableConfigs:[
      ],
      nowVariableConfig:{},
    }
  },
  created(){
  },
  computed:{
  },
  methods:{
    showPro(node){
      this.node = node;
      let config = node.variableConfigs;
      this.variableConfigs = config == null ? [] : config;
      this.variableConfigs.forEach(config=>{
        config.cid = config.id;
      })
    },
    handleCurrentChange(row){
      this.nowVariableConfig = row;
    },
    add(){
      this.$refs["addVariable"].showDialog(this.node);
    },
    update(){
      if(this.nowVariableConfig == null){
        return;
      }
      let variableConfig = this.variableConfigs[this.variableConfigs.findIndex(config=>config.cid === this.nowVariableConfig.cid)]
      this.$refs["updateVariable"].showDialog(variableConfig,this.node);
    },
    remove(){
      if(this.nowVariableConfig == null){
        return;
      }
      let index = this.variableConfigs.findIndex(config=>config.cid === this.nowVariableConfig.cid);
      this.variableConfigs.splice(index,1);
    },
    addVariableRecord(row){
      this.variableConfigs.push(row);
      this.setVariableConfigs();
    },
    updateVariableRecord(row){
      let index = this.variableConfigs.findIndex(config=>config.cid === row.cid);
      this.variableConfigs[index] = row;
      this.variableConfigs = utils.getCloneObj(this.variableConfigs);
      this.setVariableConfigs();
    },
    setVariableConfigs() {
      if (this.node.type === 'process') {
        this.process.variableConfigs = this.variableConfigs;
      } else {
        this.parentNode.variableConfigs = this.variableConfigs;
      }
    },
  }
}
</script>

<style scoped lang="scss">

</style>